<div class="select-condition">
  <div class="select-area">
    <div class="first-line">
      <div class="decide-areas">
        <label>特殊地域：</label>
        <div class="radio-group">
          <nz-checkbox-group [(ngModel)]="specialThree"
                             (ngModelChange)="specialThreeChange(specialThree)"></nz-checkbox-group>
          <nz-checkbox-group [(ngModel)]="specialTwo"
                             (ngModelChange)="specialTwoChange(specialTwo)"></nz-checkbox-group>
        </div>
        <div class="areas" style="margin-left: 36px">
          <label>颁布地域：</label>
          <div class="flex-wrap">
            <div class="area-wrap">
              <nz-cascader [nzOptions]="areaOptions" [(ngModel)]="areaValues[i]"
                           *ngFor="let area of areaValues;index as i"
                           (ngModelChange)="onAreaChanges($event,areaValues,i)"></nz-cascader>
            </div>

            <i nz-icon nzType="plus" nzTheme="outline" class="filter-add" (click)="isEmpty(areaValues)"></i>
          </div>
        </div>
      </div>
    </div>

    <div class="second-line">
      <div class="years">
        <label>颁布年份：</label>
        <nz-range-picker [nzMode]="'month'" [(ngModel)]="date"
                         (nzOnCalendarChange)="dateOnChange($event)"
                         (ngModelChange)="clearChange($event)"></nz-range-picker>
        <!--      <nz-date-picker nzMode="month"></nz-date-picker>-->
      </div>
      <div class="organs">
        <label>发布机构：</label>
        <div class="flex-wrap">
          <div class="organs-wrap">
            <nz-cascader [nzOptions]="organOptions" [(ngModel)]="organValues[i]"
                         *ngFor="let organ of organValues;index as i"
                         (ngModelChange)="onOrganChanges($event,organValues,i)"></nz-cascader>
          </div>

          <i nz-icon nzType="plus" nzTheme="outline" class="filter-add" (click)="isEmpty(organValues)"></i>
        </div>
      </div>
      <div class="files">
        <label>文件类型：</label>
        <div class="flex-wrap">
          <div class="files-wrap">
            <nz-select [(ngModel)]="fileValues[i]" nzPlaceHolder="请选择文件类型" *ngFor="let file of fileValues;index as i"
                       (ngModelChange)="onFilesChanges($event,fileValues,i)"
                       [nzAllowClear]="true" style="width: 100px">
              <nz-option [nzValue]="filesOption" [nzLabel]="filesOption"
                         *ngFor="let filesOption of filesOptions"></nz-option>
            </nz-select>
          </div>
          <i nz-icon nzType="plus" nzTheme="outline" class="filter-add" (click)="isEmpty(fileValues)"></i>
        </div>

      </div>
    </div>

  </div>
  <div class="checkbox-area" *ngIf="isShow">
    <div style="word-break: keep-all;">热点关键词：</div>
    <div class="checkbox-group">
      <nz-checkbox-group [(ngModel)]="spotList" (ngModelChange)="spotsChange(spotList)"></nz-checkbox-group>
    </div>
  </div>
  <div class="frame-area">
    <div class="frame" *ngFor="let frame of frames;index as i">
      <label nz-checkbox [(ngModel)]="frame.checked"
             (ngModelChange)="frameCheck($event,i,frame.id)">{{frame.name}}</label>
      <div class="flex-wrap">
        <div class="frame-wrap">
          <nz-cascader [nzOptions]="frame.children" nzChangeOnSelect [nzExpandTrigger]="'hover'"
                       *ngFor="let frameId of frameIdList[i];index as j" [nzValueProperty]="'name'"
                       (nzSelectionChange)="onFrameChanges($event,i,j)"></nz-cascader>
        </div>

        <i nz-icon nzType="plus" nzTheme="outline" class="filter-add"
           (click)="isEmptyFrame(frameIdListCondition[i],i)"></i>
      </div>
    </div>
  </div>
</div>
